<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <title>项目参数设置</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        #container {
            border: 1px solid #aaa;
            margin: 1em;
        }

        .header {
            background: #D7D7D7;
            line-height: 3em;
            border-bottom: 1px solid #aaa;
        }

        .padding {
            padding-left: 1em;
        }

        .consultant {
            padding: 2em 1em;
        }

        .el-table {
            margin: 2em 0 1em 0;
        }

        .el-table thead tr th {
            background-color: #027DB4;
            color: #fff;
        }

        .el-table td,
        .el-table th {
            text-align: center;
        }

        [v-cloak] {
            display: none;
        }
        .el-dialog{
            width:25em;
        }
        .el-dialog__header{
            text-align:center;
            background:#027db4;
            padding:15px;
        }
        .el-dialog__title {
            line-height: 18px;
            font-size: 18px;
            color:#fff;
        }
        .title{
            color:#027DB4;
            margin-top:2em;
        }
        .el-dialog__footer{
            padding-right:40px;
        }
    </style>
</head>

<body>
<div id='container' v-cloak>
    <div class="top">
        <p class='header padding'>项目参数设置</p>
        <div class='consultant'>
            <span>项目名称</span>
            <el-select v-model='pname' size='small' @change="selectProject">
                <el-option v-for='item in opts' :key='item.id' :label='item.name' :value='item.id'></el-option>
            </el-select>
            <el-table border :data='list'>
                <el-table-column type='index' label='序号' width="60"></el-table-column>
                <el-table-column label="参数名称" width="180">
                    <template slot-scope='scope'>
                        {{scope.row.cycleType==='conversionSign'?'认购转签约周期':scope.row.cycleType==='receivable'?'签约收款周期':'客户自动放弃周期'}}
                    </template>
                </el-table-column>
                <el-table-column prop="cycleValue" label="数值" width="180">
                </el-table-column>
                <el-table-column prop="userName" label="设置人员">
                </el-table-column>
                <el-table-column prop="createTime" label="设置日期">
                </el-table-column>
                <el-table-column label="状态">
                    <template slot-scope='scope'>
                        <el-switch v-model="scope.row.delFlag" active-text="on" inactive-text="off" active-value="0"
                                   inactive-value="1" @change="changeStatus(scope.row)">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope='scope'>
                        <el-button type='primary' @click='edit(scope.row)' size='small'>编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <el-dialog :title="title" :visible.sync="dialogFormVisible">
            <span>参数设置</span>
            <el-input v-model="szvalue" style='width:17em;margin-left:1em;margin-right:1em;' auto-complete="off"
                      type='number'></el-input>
            天
            <p class="title">说明：参数只支持"正整数"</p>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="sure">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</div>

</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el: '#container',
        data: {
            deliver:{},
            pname: '',
            list: [],
            opts: [
                <c:forEach items="${projectList}" var="list">
                {
                    name:"${list.projectName}",
                    id: "${list.id}"
                },
                </c:forEach>
            ],
            query: {
                pageNum: 1,
                pageSize: 10,
                projectId: '',
                menu: 'menu_0003_0005',
                type:'0'
            },
            dialogFormVisible: false,
            title: '签约收款周期',
            szvalue: ''
        },
        filters: {
            timeFilter(el) {
                if (el) {
                    return el.substring(0, 10)
                }
            }
        },
        created() {
            this.query.projectId = this.opts[0].id
            this.pname=this.query.projectId
            this.queryData()
        },
        methods: {
            selectProject(val){
              this.query.projectId = val
              this.queryData()
            },
            formatTime(date) {
                const year = date.getFullYear()
                const month = date.getMonth() + 1
                const day = date.getDate()
                const formatNumber = function (el) {
                    el = el.toString()
                    return el[1] ? el : '0' + el
                }
                return [year, month, day].map(formatNumber).join('-')
            },
            transform(data) {
                let ret = ''
                for (let it in data) {
                    ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
                }
                return ret
            },
            sure() {
                const reg = /^[1-9]\d{0,4}$/
                if(!reg.test(this.szvalue)){
                    this.$message.error('参数格式有误')
                    return
                }
                const self = this
                this.deliver.cycleValue = this.szvalue
                // const data = this.transform({
                //     json:JSON.stringify(this.deliver)
                // })
                const req = this.http()
                req.open('POST', `/emm-website/estate/projectParameter/edit`, true)
                // req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
                req.setRequestHeader('Content-Type', 'application/json')
                req.onreadystatechange = function () {
                    if (req.readyState === 4 && req.status === 200) {
                        const result = JSON.parse(req.responseText)
                        if (result.res===1) {
                            self.$message.success('操作成功')
                            self.dialogFormVisible = false
                            self.queryData()
                        }
                    else{
                            self.$message.error('操作失败')
                        }
                    }
                }
                req.send(JSON.stringify(this.deliver))

            },
            queryData() {
                const self = this
                const data = this.transform(self.query)
                const req = this.http()
                req.open('POST', `/emm-website/estate/projectParameter/getPage`, false)
                req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
                req.onreadystatechange = function () {
                    if (req.readyState === 4 && req.status === 200) {
                        const result = JSON.parse(req.responseText)
                        if (result.res===1) {
                            self.list = result.obj.rows
                            self.list.forEach(el=>{
                                let time = new Date(el.createTime)
                                el.createTime = self.formatTime(time)
                            })
                        }

                        console.log(self.list)
                    }
                }
                req.send(data)
            },
            http() {
                const req = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP')
                return req
            },
            changeStatus(val){
                console.log(val)
                const self = this
                // let arr = []
                // arr.push(val)
                // const data = this.transform({
                //     json:JSON.stringify(arr),
                //     project:self.query.projectId
                // })
                const req = this.http()
                req.open('POST', `/emm-website/estate/projectParameter/edit`, true)
                // req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
                req.setRequestHeader('Content-Type', 'application/json')
                req.onreadystatechange = function () {
                    if (req.readyState === 4 && req.status === 200) {
                        const result = JSON.parse(req.responseText)
                        if (result.res===1) {
                            self.$message.success('操作成功')
                            self.queryData()
                        }
                        else{
                            self.$message.error('操作失败')
                        }
                    }
                }
                req.send(JSON.stringify(val))
            },
            edit(val) {
                this.szvalue = val.cycleValue
                this.title =val.cycleType==='conversionSign'?'认购转签约周期':val.cycleType==='receivable'?'签约收款周期':'客户自动放弃周期'
                this.dialogFormVisible = true
                this.deliver = val
            }
        }
    })
</script>

</html>